<template>
	<view class="content">
		<!-- #ifdef APP-PLUS||H5 -->
		<up-sticky>
			<view class="header">
				<view class="header_con">
					<up-tabs lineWidth="80rpx" lineHeight="6rpx" :activeStyle="{ color: '#fff' }"
						:inactiveStyle="{ color: '#fff' }" lineColor="#F3E0BB" :list="tablist"
						@click="setTab"></up-tabs>
					<view class="header_icon">
						<image @click="goUrl('/subPages/chaoshan/search')" src="/static/imgs/chaoshan/search.png"
							mode=""></image>
						<image src="/static/imgs/chaoshan/tixing.png" mode="" @click="goUrl('/subPages/home/message')">
						</image>
					</view>
				</view>
				<!-- <view v-else class="search">
					<up-icon name="arrow-left" size='30rpx' color="#fff" @click="set_search=true"></up-icon>
					<up-input @focus="goUrl('/subPages/chaoshan/search')" class='input' border="none"
						placeholder="搜索追思会/用户" shape="circle" clearable customStyle="background:#fff;height: 72rpx;"
						placeholderClass="placeholderClass">
					</up-input>
					<text>搜索</text>
				</view> -->
			</view>
		</up-sticky>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<up-sticky bgColor="#121512">
			<view class="header">
				<view class="navHeight_" :style="{ height: navHeight + 'px' }">
					<view class="header_con">
						<up-tabs lineWidth="80rpx" lineHeight="6rpx" :activeStyle="{ color: '#fff' }"
							:inactiveStyle="{ color: '#fff' }" lineColor="#F3E0BB" :list="tablist"
							@click="click"></up-tabs>
						<view class="header_icon">
							<image @click="goUrl('/subPages/chaoshan/search')" src="/static/imgs/chaoshan/search.png"
								mode=""></image>
							<image src="/static/imgs/chaoshan/tixing.png" mode="" @click="cs"></image>
						</view>
					</view>
				</view>
			</view>
		</up-sticky>
		<!-- #endif -->
		<view class="box" :style="{ height: height }">
			<mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :height="height">
				<view class="list">
					<view class="con" v-for="(item, index) in list" :key="index" @click="
							goUrl('/subPages/chaoshan/detail_video?item=' + JSON.stringify(item))
						">
						<view class="img">
							<image :src="
									item.articleUrlType === 1
										? item.articleUrls[0]
										: item.videoCover
								" mode=""></image>
							<image v-if="item.articleUrlType === 2" src="/static/imgs/chaoshan/chaoshan_play.png"
								mode="" class="video_play"></image>
							<view class="fun_l">
								<image src="/static/imgs/chaoshan/pl.png" mode=""></image>
								<text>{{ item.commentNum }}</text>
							</view>
							<view class="fun_r" @click.native.stop="setPraise(item.id, item.praise)">
								<image src="/static/imgs/chaoshan/zan.png" mode="" v-if="!item.praise"></image>
								<image src="/static/imgs/chaoshan/zan_check.png" mode="" v-else></image>
								<text>{{ item.praiseNum }}</text>
							</view>
						</view>
						<view class="txt">
							<view class="title">{{ item.articleTitle }}</view>
							<view class="text">{{ item.articleContent }}</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		onMounted,
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		onReady,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
	import {
		askListApi,
		chaoshanPraiseApi
	} from '@/API/chaoshan/index.js';
	import {
		loginApi
	} from '../../../API/login/login';
	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(onPageScroll, onReachBottom);
	const tablist = reactive([{
			name: '潮汕文化'
		},
		{
			name: '祭拜活动'
		}
	]);
	let list = ref([]);
	let height = ref('0');
	let navHeight = ref('0');
	let flag = ref(false);
	let tabIndex = ref(1);
	onReady(() => {
		navHeight.value = getApp().globalData.navHeight;
		setTimeout(() => {
			// #ifdef APP-PLUS || H5
			uni.createSelectorQuery()
				.select('.header')
				.boundingClientRect((res) => {
					height.value =
						uni.getSystemInfoSync().screenHeight -
						50 -
						uni.upx2px(24) -
						res.height -
						getApp().globalData.bottom -
						getApp().globalData.statusBarHeight +
						'px';
				})
				.exec();
			// #endif
			// #ifdef MP-WEIXIN
			uni.createSelectorQuery()
				.select('.header')
				.boundingClientRect((res) => {
					height.value =
						uni.getSystemInfoSync().screenHeight -
						50 -
						uni.upx2px(24) -
						getApp().globalData.bottom -
						res.height -
						navHeight.value +
						'px';
				})
				.exec();
			// #endif
		}, 100);
	});
	const goUrl = (url) => {
		uni.navigateTo({
			url: url
		});
	};
	const setPraise = async (id, praise) => {
		let res = await chaoshanPraiseApi({
			id: id,
			praise: praise === 1 ? 0 : 1
		});
		console.log('praise', praise);
		if (res.code === 0) {
			uni.showToast({
				title: praise == 0 ? '点赞成功' : '取消成功'
			});
			list.value.map((item) => {
				if (item.id === id) {
					item.praise = res.data.Praise;
					item.praiseNum = res.data.PraiseNum;
				}
			});
			console.log(list.value);
		}
	};
	const upCallback = async (mescroll) => {
		let rst = await askListApi({
			pageIndex: mescroll.num,
			reqNum: mescroll.size,
			articleType: tabIndex.value
		});
		if (rst.data.code == 0) {
			const curPageData = rst.data.data.articleItems || []; // 当前页数据
			if (mescroll.num == 1) list.value = []; // 第一页需手动制空列表
			curPageData.forEach((ele) => {
				ele.articleUrls = ele.articleUrls.split(',');
			});
			list.value = list.value.concat(curPageData); //追加新数据
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
			// mescroll.endBySize(curPageData.length, totalSize)
		} else {
			mescroll.endErr();
		}
	};
	const setTab = (e) => {
		tabIndex.value = e.index + 1;
		getMescroll().resetUpScroll();
	};
</script>

<style lang="scss">
	page {
		background-color: #121512;
	}

	::v-deep.u-tabs__wrapper__nav__item__text {
		font-size: 36rpx !important;
	}

	.placeholderClass {
		color: #969da3;
		font-size: 26rpx;
	}

	::v-deep.u-input__content {
		padding: 0 32rpx !important;
	}

	.content {
		height: auto;
	}

	.header {
		// position: sticky;
		// top: 0;
		// z-index: 999;
		// /* #ifdef APP-PLUS||H5 */
		height: 88rpx;
		// /* #endif */
		width: 100%;
		padding-bottom: 32rpx;
		display: flex;
		background-color: #121512;
		flex-direction: column;
		justify-content: center;

		.header_con {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.header_icon {
				display: flex;
				position: absolute;
				right: 0rpx;

				image {
					width: 56rpx;
					height: 56rpx;
					padding-left: 30rpx;
				}
			}
		}

		.search {
			display: flex;
			align-items: center;

			.input {
				margin: 0 32rpx;
			}

			text {
				color: #f3e0bb;
			}
		}
	}

	.box {
		overflow: auto;

		.list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.con {
				width: 48%;
				margin-bottom: 24rpx;
				background-color: #292b2a;
				color: #fff;
				border-radius: 10rpx;

				.img {
					height: 454rpx;
					position: relative;

					.video_play {
						position: absolute;
						z-index: 99;
						top: 8rpx;
						right: 8rpx;
						width: 40rpx;
						height: 40rpx;
					}

					.fun_l,
					.fun_r {
						position: absolute;
						z-index: 99;
						display: flex;
						align-items: center;

						text {
							padding-left: 6rpx;
						}

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}

					.fun_l {
						left: 16rpx;
						bottom: 16rpx;
					}

					.fun_r {
						right: 16rpx;
						bottom: 16rpx;
					}

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx 10rpx 0 0;
					}
				}

				.txt {
					padding: 16rpx;

					.title {
						// font-weight: bold;
						white-space: nowrap;
						/* 确保文本不会换行 */
						overflow: hidden;
						/* 隐藏超出容器的文本 */
						text-overflow: ellipsis;
						/* 当文本超出容器时显示省略号 */
					}

					.text {
						padding-top: 8rpx;
						font-size: 24rpx;
						white-space: pre-wrap;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					// .foot {
					// 	display: flex;
					// 	justify-content: space-between;

					// 	view {
					// 		display: flex;
					// 		align-items: center;
					// 		font-size: 24rpx;

					// 		text {
					// 			padding-left: 6rpx;
					// 		}
					// 	}
					// }
				}
			}
		}
	}
</style>